<template>
  <div>
    <mynavbar></mynavbar>
    <div class="top">
      <div class="v1">
        <img src="../imgs/huiyuan.png" alt="" />
      </div>
      <div class="czz">
        <p>成长值0</p>
        |
        <p>积分0</p>
      </div>
    </div>
    <div class="tequan">
      <div class="tes">
        <h3>v1·等级特权</h3>
        <p>查看全部></p>
      </div>

      <van-grid :column-num="4">
        <van-grid-item icon="bag" text="升级礼包" />
        <van-grid-item icon="gold-coin" text="极速售后" />
        <van-grid-item icon="info" text="以换代修" />
        <van-grid-item icon="clock" text="延保服务" />
      </van-grid>
    </div>
    <div class="renwu">
      <div class="tes">
        <h3>任务中心</h3>
        <p>查看全部></p>
      </div>
      <div class="rw">
        <div class="minbox">
          <van-icon name="manager-o" size="40px" />
          <div>
            <p>完善个人信息</p>
            <span>V1及以上会员专享，仅限一次</span>
          </div>
          <button>去完善</button>
        </div>

        <div class="minbox">
          <van-icon name="edit" size="40px" />
          <div>
            <p>设置支付密码</p>
            <span>V1及以上会员专享，仅限一次</span>
          </div>
          <button>去设置</button>
        </div>

        <div class="minbox">
          <van-icon name="shop-collect-o" size="40px" />
          <div>
            <p>购物天数达标</p>
            <span>自然月内购物天数达到三次</span>
          </div>
          <button>去购物</button>
        </div>
        <div class="minbox">
          <van-icon name="shop-o" size="40px" />
          <div>
            <p>消费购物</p>
            <span>确认收货后发放成长值</span>
          </div>
          <button>去购物</button>
        </div>
        <div class="minbox">
          <van-icon name="comment-o" size="40px" />
          <div>
            <p>评价奖励</p>
            <span>记录真实的评价体验赚成长值</span>
          </div>
          <button>去评价</button>
        </div>
        <div class="minbox">
          <van-icon name="guide-o" size="40px" />
          <div>
            <p>邀请返利</p>
            <span>邀请好友成功下单可获得奖励</span>
          </div>
          <button>去邀请</button>
        </div>
        <div class="minbox">
          <van-icon name="manager-o" size="40px" />
          <div>
            <p>完善个人信息</p>
            <span>V1及以上会员专享，仅限一次</span>
          </div>
          <button>去完善</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mynavbar from "../item/mynavbar.vue";
export default {
  components: {
    mynavbar,
  },
};
</script>

<style scoped>
.top {
  width: 100%;
  height: 18.75rem;
  background: rgb(242, 242, 242);
  position: relative;
}
.v1 {
  position: absolute;
  top: 3.25rem;
  left: 1.25rem;
}
.v1 img {
  border-radius: 1.25rem;
}
.czz {
  width: 12.125rem;
  height: 2.5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgb(232, 232, 232);
  color: #999;
  position: absolute;
  top: 15.25rem;
  left: 5rem;
  border-radius: 1.25rem;
}
.tes {
  display: flex;
  justify-content: space-between;
  margin-top: 1.25rem;
}
.renwu .rw {
  width: 96%;
  margin: 0 2%;
  background: #eee;
  border-radius: 1.25rem;
}
.minbox {
  display: flex;
  justify-content: space-around;
  margin: 1.625rem 0;
}
.minbox span {
  color: #999;
  font-size: 0.8125rem;
}
.minbox button {
  width: 3.4375rem;
  height: 1.875rem;
}
</style>